<template>
  <div class="detailPageHeader">
    <div class="baseInfo">
      <el-card class="box-card info-item">
        <el-descriptions
          direction="vertical"
          class="margin-top base_desc"
          :column="4"
          border
        >
          <el-descriptions-item label="名称">
            {{ formData.name }}
          </el-descriptions-item>
          <el-descriptions-item label="系列名称">
            {{ changeEmpty(formData.seriesName) }}
          </el-descriptions-item>
          <el-descriptions-item label="品牌">
            {{ changeEmpty(formData.brand) }}
          </el-descriptions-item>
          <el-descriptions-item label="类别">
            {{ changeEmpty(formData.category) }}
          </el-descriptions-item>
          <el-descriptions-item label="产品代号">
            {{ changeEmpty(formData.productCode) }}
          </el-descriptions-item>
          <el-descriptions-item label="产品型号">
            {{ changeEmpty(formData.productModel) }}
          </el-descriptions-item>
          <el-descriptions-item label="产品规格">
            {{ changeEmpty(formData.specification) }}
          </el-descriptions-item>
          <el-descriptions-item label="产品定位">
            {{ changeEmpty(formData.position) }}
          </el-descriptions-item>
          <el-descriptions-item label="能效等级">
            {{ changeEmpty(formData.energyLevel) }}
          </el-descriptions-item>
          <el-descriptions-item label="开发平台">
            {{ changeEmpty(formData.developmentPlatform) }}
          </el-descriptions-item>
          <el-descriptions-item label="外观颜色">
            {{ changeEmpty(formData.color) }}
          </el-descriptions-item>
          <el-descriptions-item label="外观材质">
            {{ changeEmpty(formData.material) }}
          </el-descriptions-item>
          <el-descriptions-item label="功能">
            <el-tag
              style="margin: 2px"
              size="mini"
              v-for="item in changeFunc(changeEmpty(formData.func))"
              :key="item.index"
            >
              {{ item }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="基础机型">
            {{ changeEmpty(formData.base) }}
          </el-descriptions-item>
          <el-descriptions-item label="任务来源">
            {{ changeEmpty(formData.origin) }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型">
            {{ changeEmpty(formData.type) }}
          </el-descriptions-item>
          <el-descriptions-item label="出风方式">
            {{ changeEmpty(formData.windType) }}
          </el-descriptions-item>
          <el-descriptions-item label="销售渠道">
            {{ changeEmpty(formData.distribution_channel) }}
          </el-descriptions-item>
          <el-descriptions-item label="较基础机型变更点">
            {{ changeEmpty(formData.changePoint) }}
          </el-descriptions-item>
        </el-descriptions>

        <div slot="header" class="clearfix">
          <span>基本信息</span>
        </div>
      </el-card>
      <el-card class="box-card info-item">
        <div slot="header" class="clearfix">
          <span>成员信息</span>
        </div>
        <el-row :gutter="20">
          <el-descriptions
            direction="vertical"
            class="margin-top"
            :column="4"
            border
          >
            <el-descriptions-item label="责任科室">
              {{ changeEmpty(formData.project_office) }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            direction="vertical"
            class="margin-top"
            :column="4"
            border
          >
            <el-descriptions-item label="项目经理/负责人">
              {{ changeEmpty(formData.project_leader) }}
            </el-descriptions-item>
            <el-descriptions-item label="项目负责人主任">
              {{ changeEmpty(formData.project_director) }}
            </el-descriptions-item>
            <el-descriptions-item label="产品策划负责人">
              {{ changeEmpty(formData.plan_leader) }}
            </el-descriptions-item>

            <el-descriptions-item label="产品负责人主任">
              {{ changeEmpty(formData.plan_director) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
        <el-row :gutter="20">
          <el-descriptions
            direction="vertical"
            class="margin-top"
            :column="5"
            border
          >
            <el-descriptions-item label="内机控制器负责人">
              {{ changeEmpty(formData.inside_leader) }}
            </el-descriptions-item>
            <el-descriptions-item label="外机控制器负责人">
              {{ changeEmpty(formData.out_leader) }}
            </el-descriptions-item>
            <el-descriptions-item label="遥控器负责人">
              {{ changeEmpty(formData.remote_leader) }}
            </el-descriptions-item>
            <el-descriptions-item label="智能板块负责人">
              {{ changeEmpty(formData.smart_leader) }}
            </el-descriptions-item>
            <el-descriptions-item label="印刷板块负责人">
              {{ changeEmpty(formData.print_leader) }}
            </el-descriptions-item>
            <el-descriptions-item label="内机负责人主任">
              {{ changeEmpty(formData.inside_director) }}
            </el-descriptions-item>
            <el-descriptions-item label="外机负责人主任">
              {{ changeEmpty(formData.out_director) }}
            </el-descriptions-item>
            <el-descriptions-item label="遥控器负责人主任">
              {{ changeEmpty(formData.remote_director) }}
            </el-descriptions-item>
            <el-descriptions-item label="智能板块负责人主任">
              {{ changeEmpty(formData.remote_director) }}
            </el-descriptions-item>
            <el-descriptions-item label="印刷板块负责人主任">
              {{ changeEmpty(formData.print_director) }}
            </el-descriptions-item>
          </el-descriptions>
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import SuperFormMixin from "@/mixins/super-form-mixin";
import { easyClone } from "@/util/index.js";
export default {
  props: {
    data: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      formData: {},
    };
  },
  methods: {
    changeFunc(func) {
      if (func.length > 0) {
        let func_list = [];
        func_list = func.split(",");
        return func_list;
      } else {
        return ["暂无"];
      }
    },
    changeEmpty(val) {
      if (!val) {
        return "暂无";
      } else {
        return val;
      }
    },
  },
  watch: {
    data: {
      handler(newValue) {
        this.formData = easyClone(newValue) || {};
        console.log("productDetail", this.formData);
      },
      immediate: true,
      deep: true,
    },
  },
  name: "DetailPageHeader",
  // mixins: [SuperFormMixin],
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.clearfix span {
  float: left;
}
.box-card {
  width: 100%;
}
.base_desc >>> th {
  width: 25%;
}
.info-item {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
  text-align: left;
  padding-left: 20px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  /* font-weight: bold; */
  font-size: 16px;
}
.light-content {
  color: #999;
  font-weight: bold;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>